<template>
    <div class="saveItem">
        <div class="item" v-for="item in data" :key="item" @click="handleItem(item.filter_obj_code)">
            <div class="title">
                <img src="http://api.dui-xian.com:7080/av_system.png" style="width: 30px; height: 30px; border-radius: 15px;" />
                <span class="title_text">过滤器名称：{{ item.filter_name }}</span>

                <div class="title_right">
                    <el-button  class="but1" @click.stop="deletefilter(item.filter_obj_code)">删除</el-button>
                </div>
            </div>
            <div class="main">
                <span class="main_textone">过滤器编码：{{ item.filter_obj_code }}</span>
                <span class="main_texttwo">过滤器创建时间：{{ item.creat_time }}</span>
            </div>
            <div class="fenge"></div>
        </div>
    </div>
</template>
<script setup>
import { http } from '@/utils/f-http'
const props = defineProps({
    data:Array
})
const emit = defineEmits(['emit'])

const deletefilter = (item) =>{
    emit('delete',item)
}

const handleItem = (item) =>{
    http.get('/filter/get_filter_match', { params: { page: 1, page_size: 20, filter_obj_code: item } }).then((res) => {
        console.log(res.data.list)
        
    })
}
</script>
<style lang='scss' scoped>
.saveItem{
    width: 330px;
}
.item{
    padding: 16px;
}
.item:hover{
    background-color: #f8f9fa;
}
.title{
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
.title_text{
    margin-left: 8px;
    font-size: 14px;
    color: #000;
}
.title_right{
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-left: auto;
}
.but1{
    width: 60px;
    height: 32px;
    background-color: #e92937;
    color: #fff;
    border: 0;
    border-radius: 0;
}
.main{
    display: flex;
    flex-direction: column;
}
.main_textone{
    font-size: 16px;
    font-weight: 500;
    color: #000;
    margin-top: 16px;
}
.main_texttwo{
    font-size: 12px;
    color: #000;
    margin-top: 4px;
}
.fenge{
    width: 320px;
    height: 1px;
    margin-left: -16px;
    margin-top: 16px;
    margin-bottom: -16px;
    background-color: #ebebeb;
}
</style>